<template>
	<view>
		<swiper-tab-head :tabBars="tabBars" :tabindex="tabindex" @tabtap="tabtap"></swiper-tab-head>

		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height:swiperheight+'px'}" :current="tabindex" @change="tabChange">
				<swiper-item v-for="(items,index) in newlist" :key="index">
					<!-- @scrolltolower这个是触底事件 -->
					<scroll-view scroll-y class="list" @scrolltolower="loadmores(index)">
						<template v-if="items.list.length>0">
							<!-- 图文列表 -->
							<view class="top-lists">
								<block v-for="(item,index1) in items.list" :key="index1">
									<!-- 列表组件 -->
									<top-list :item="item" :index="index"></top-list>
								</block>
							</view>
							<!-- 上拉刷新 -->
							<loadMore :loadtext="items.loadtext"></loadMore>
						</template>
						<template v-else>
							<!-- 无内容 默认的地方-->
							<noThing></noThing>
						</template>
					</scroll-view>
				</swiper-item>

			</swiper>
		</view>
	</view>
</template>

<script>
	import indexList from "../../components/index/index-list.vue";
	import swiperTabHead from "../../components/index/swiper-tab.vue";
	import loadMore from "../../components/common/load-more.vue";
	import noThing from "../../components/common/nothing.vue";
	import topList from "../../components/news/top-list.vue";
	export default {
		components: {

			swiperTabHead,
			noThing,
			topList,
			loadMore

		},
		data() {
			return {
				swiperheight: 500,
				tabindex: 0,
				tabBars: [{
						name: '关注',
						id: 'guanzhu'
					},
					{
						name: '推荐',
						id: 'tuijie'
					},
					{
						name: '体育',
						id: 'tiyu'
					},
					{
						name: '热点',
						id: 'redian'
					},
					{
						name: '热门',
						id: 'remen'
					},
					{
						name: '时事',
						id: 'shishi'
					}
				],
				newlist: [

					{
						loadtext: "上拉加载更多",
						list: [{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							}
						]
					},
					{
						loadtext: "上拉加载更多",
						list: [{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},

							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							}
						]
					},
					{
						loadtext: "上拉加载更多",
						list: [{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							}
						]
					},
					{
						loadtext: "上拉加载更多",
						list: [{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							},
							{
								titlepic: "../../static/srcc/3.jpg",
								title: "打代码好吗",
								desc: "打代码很好，天天熬夜打怪兽",
								totalnum: 50,
								todaynum: 10
							}
						]
					}, 
					{
						loadtext: "",
						list: []
					},
					{
						loadtext: "",
						list: []
					}


				]

			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100);
					console.log(res.screenHeight);
					console.log(height);
					this.swiperheight = height;
				}
			});
		},
		methods: {

			// 点击事件
			tabtap(index) {
				console.log(index);
				this.tabindex = index;
			},
			//滑动事件
			tabChange(e) {
				console.log(JSON.stringify(e.detail))
				this.tabindex = e.detail.current;
			},
			//上拉加载事件
			loadmores(index) {
				//如果目前全等于加载更多我们就给他这个事件，不然就return
				if (this.newlist[index].loadtext != "上拉加载更多") {
					return;
				}
				//修改状态
				this.newlist[index].loadtext = "加载中...";
				//获取数据
				setTimeout(() => {
					//获取完成
					let obj = {

						titlepic: "../../static/srcc/3.jpg",
						title: "打代码好吗",
						desc: "打代码很好，天天熬夜打怪兽",
						totalnum: 50,
						todaynum: 10

					};
					this.newlist[index].list.push(obj);
					this.newlist[index].loadtext = "上拉加载更多"
				}, 1000);


				//this.newlist[index].loadtext="没有更多数据了";
			}
		}
	}
</script>

<style>
	.top-lists {
		padding: 0 20upx;

	}
</style>
